<template>
	<view class="swiper-box">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" :circular="true"
		 @change="change">
			 <block v-for="(item,index) of list" :key="index">
				<swiper-item @click="tolink3(item.id)">
					<view class="swiper-item">
						<image class="swiper-item" :src="item.banner"></image>
						<view class="swiper-title animated faster fadeIn">{{item.title}}</view>
					</view>
				</swiper-item>
			 </block>
		</swiper>
		<!-- dots -->
		<!-- <view class="dtos">
			<view class="dto" :class="{'dto-active':index===currIndex}" v-for="(item,index) in list" :key="index">
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		data() {
			return {
				currIndex: 0,
			};
		},
		methods: {
			change(s) {
				this.currIndex = s.detail.current;
			},
			tolink3(id) {
				uni.navigateTo({
					url: '/pages/news/newsDetail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 100%;
		height: 340rpx;
		background: #fff;
	}

	.swiper {
		height: 320rpx;
		margin: 0 auto 0;
		//padding: 25upx 36rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper-item {
		width:100%;
		height: 320rpx;
		position: relative;
		.swiper-title{
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			font-size: 32rpx;
			right: 0rpx;
			height: 68rpx;
			line-height: 68rpx;
			color: #fff;
			padding: 0 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			background-image: url(/static/icon/tit-bg.png);
			background-size: cover;
		}
	}

	.dtos {
		display: flex;
		justify-content: center;
		margin-top: 22upx;
		.dto {
			width: 14upx;
			height: 14upx;
			border-radius: 500upx;
			background: #000;
			margin: 0 7upx;
			transition: width 0.5s;
		}
		.dto-active {
			background: #c2c2c2;
			width: 26upx;
		}
	}
</style>
